<template>
  <el-dialog v-model="open" :title="title" width="510px" custom-class="upload-file-image" @opened="initOpen">
    <template v-if="type == 'image'">
      <ImageUpload v-model="fileList" @uploadImage="uploadSuccess" :isShowTip="false" :limit="100">
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅支持上传jpg/jpeg/png格式文件，单个文件不能超过100MB</span>
          </div>
        </template>
      </ImageUpload>
    </template>
    <template v-else>
      <FileUpload v-model="fileList" @uploadFile="uploadSuccess" :drag="true" :isShowTip="false" :limit="limit"></FileUpload>
    </template>
    <template #footer>
      <el-button type="primary" @click="confirm">确定</el-button>
      <el-button plain @click="closeDialog">取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
const props = defineProps({
  open: Boolean,
  file: {
    type: Array,
    default: () => ([])
  },
  type: String,
  limit: {
    type: Number,
    default: 100
  }
})
const emits = defineEmits(['update:open', 'updateTable'])
const fileList = ref([])
const title = computed(() => props.type == 'image' ? '上传图片' : '上传文件')
let files = []

const initOpen = () => {
  fileList.value = [...files, ...props.file]
}
const closeDialog = () => {
  emits('update:open', false)
  files = []
  fileList.value = []
}
const uploadSuccess = (data) => {
  files = data
}

const confirm = () => {
  emits('updateTable', JSON.parse(JSON.stringify(files)))
  closeDialog()
}
</script>
<style lang="scss">
.el-dialog.upload-file-image .el-dialog__body {
    text-align: center;
}
</style>